import { ShoppingCartService } from 'mobile/services/shoppingCartService';
import React = require('react');
import { subscribe } from 'common';
import { PageContext } from "maishu-chitu-react";
import { component } from 'components/common/component';
import { BaseComponent } from 'components/common/base-component';
import { ComponentProps } from 'maishu-jueying';
import { LocalService } from 'services/local-service';

export let MenuStorageName = "Menu";
export let defaultShowIcon = false;

export interface MenuNode {
    name: string,
    url: string,
    sortNumber?: number,
    icon?: string,
    children?: MenuNode[]
}

export interface Props extends ComponentProps<Menu> {
    // menuNodes: MenuNode[];
    // showIcon: boolean;
}

export interface State {
    // menuNodes?: MenuNode[];
    // showIcon?: boolean;
    productsCount?: number,
    menuNodes?: MenuNode[]
    showIcon?: boolean;
}

const EMPTY_ICON = 'icon-check-empty';

@component()
export class Menu extends BaseComponent<Props, State>{

    // static defaultProps: Props = { showIcon: false }
    localService: LocalService;

    constructor(props) {
        super(props);

        this.localService = this.createService(LocalService);
        let productsCount = ShoppingCartService.productsCount.value;
        this.state = { productsCount, menuNodes: [] };
    }

    async componentDidMount() {
        let { menuNodes, showIcon } = await this.localService.getDataObject<State>(MenuStorageName) || {} as State;
        menuNodes = menuNodes || [];
        this.setState({ menuNodes, showIcon });

        subscribe(this, ShoppingCartService.productsCount, (value) => {
            this.setState({ productsCount: value });
        })
    }

    render() {
        // let { showIcon } = this.props;
        let { menuNodes, showIcon } = this.state;
        showIcon = showIcon == null ? defaultShowIcon : showIcon;
        menuNodes.sort((a, b) => {
            return (a.sortNumber || 0) - (b.sortNumber || 0);
        });
        return <div key="menuControl" className="menuControl">
            {menuNodes.length <= 0 ?
                <ul className="menu noicon"></ul> :
                showIcon ? this.renderMenuWithIcon(menuNodes) : this.renderMenuWithoutIcon(menuNodes)
            }
        </div>
    }

    private renderMenuWithoutIcon(menuNodes: MenuNode[]) {
        return (
            <ul className="menu noicon">
                {menuNodes.map((o, i) => {
                    let itemWidth = 100 / menuNodes.length;
                    return (
                        <li key={i} style={{ width: `${itemWidth}%` }}>
                            <a href={o.url}>{o.name}</a>
                        </li>
                    );
                })}
            </ul>
        );
    }

    private renderMenuWithIcon(menuNodes: MenuNode[]) {
        let productsCount = this.state.productsCount || 0;
        // return <PageContext.Consumer>{
        //     args => {
        return <ul className="menu">
            {menuNodes.map((o, i) => {
                let itemWidth = 100 / menuNodes.length;
                // let routeString = o.url.startsWith('#') ? o.url.substr(1) : o.url;
                let page = this.page; //(this.elementPage as UserPage);
                var routeData = o.url ? page.app.parseUrl(o.url) : { pageName: "" };
                let isShoppingCart = routeData.pageName == 'shopping/shoppingCart'
                let isActive = page.name == routeData.pageName; //app.currentPage != null && app.currentPage.name == routeData.pageName;
                return (
                    <li key={i} style={{ width: `${itemWidth}%` }}>
                        <div onClick={() => page.app.redirect(routeData.pageName)} className={isActive ? 'text-primary' : null}>
                            <i className={o.icon ? o.icon : EMPTY_ICON}></i>
                            {o.name}
                        </div>
                        {isShoppingCart && productsCount > 0 ? <div className="badge bg-primary" >{productsCount}</div> : null}
                    </li>
                );
            })}
        </ul>
        //     }
        // }</PageContext.Consumer>
    }
}